<template>
	<view>
		<block v-if="canvas_show">
			<view class="head_title">
				<image src="../../static/re_bg.png" mode="" class="creatBg"></image>
			</view>
			<view class="repair_main">
				<view class="repair_title">
					<text class="ful_left">工单ID：</text>
					<text class="ful_right">{{detail_.workID}}</text>
				</view>
				<view class="same_ful" style="margin-top: 10rpx;">
					<view class="ful_left">日期</view>
					<view class="ful_right">{{detail_.time}}</view>
				</view>
				<view class="same_ful">
					<view class="ful_left">客户名称</view>
					<view class="ful_right">{{detail_.name}}</view>
				</view>

				<view class="same_ful">
					<view class="ful_left">类别</view>
					<view class="ful_right">{{detail_.leibie.name||'暂无'}}</view>
				</view>
				<view class="same_ful">
					<view class="ful_left">品牌</view>
					<view class="ful_right">{{detail_.pinpai.name||'暂无'}}</view>
				</view>

				<view class="same_ful">
					<view class="ful_left">型号</view>
					<view class="ful_right">{{detail_.xinghao.name||'暂无'}}</view>
				</view>
				<view class="same_ful">
					<view class="ful_left">服务类型</view>
					<view class="ful_right">{{detail_.service_type||'暂无'}}</view>
				</view>
				<view class="same_ful">
					<view class="ful_left">合同类型</view>
					<view class="ful_right">{{detail_.warranty_type == 1?'单次维修':'单次保养'}}</view>
				</view>
				<view class="same_ful">
					<view class="ful_left">序列号</view>
					<view class="ful_right">{{detail_.serial||'暂无'}}</view>
				</view>
				<view class="same_ful">
					<view class="ful_left">设备合同状态</view>
					<view class="ful_right">{{detail_.contract_status||'暂无'}}</view>
				</view>
				<view class="title_">
					保养工单详情
				</view>
				<cora :isPdf='true' :arrList="arrList" v-if="typeData=='MRI'&&service_default=='A'"></cora>
				<corb :isPdf='true' :arrList="arrList" v-if="typeData=='MRI'&&service_default=='B'"></corb>
				<cta :isPdf='true' :arrList="arrList" v-if="typeData=='CT'&&service_default=='A'"></cta>
				<ctb :isPdf='true' :arrList="arrList" v-if="typeData=='CT'&&service_default=='B'"></ctb>
				<dra :isPdf='true' :arrList="arrList" v-if="typeData=='DR'&&service_default=='A'"></dra>
				<drb :isPdf='true' :arrList="arrList" v-if="typeData=='DR'&&service_default=='B'"></drb>
				<dsa :isPdf='true' :arrList="arrList" v-if="typeData=='DSA'&&service_default=='A'"></dsa>
				<dsb :isPdf='true' :arrList="arrList" v-if="typeData=='DSA'&&service_default=='B'"></dsb>
				<smallc :isPdf='true' :arrList="arrList" v-if="typeData=='小C'"></smallc>
				<wave :isPdf='true' :arrList="arrList" v-if="typeData=='超声'"></wave>
				<wca :isPdf='true' :arrList="arrList" v-if="typeData=='DR/F'&&service_default=='A'"></wca>
				<wcb :isPdf='true' :arrList="arrList" v-if="typeData=='DR/F'&&service_default=='B'"></wcb>
				<view class="two_">
					<view class="two_left">
						维修记录：
					</view>
					<block v-if='detail_.repair&&detail_.repair.length>0'>
						<view class="two_right" v-for="(item,index) in detail_.repair" :key="index">
							{{index+'.'+item.repair||'未获取到信息'}}
						</view>
					</block>
					<block v-else>
						暂无最新消息
					</block>
				</view>
				<view class="border_">
				</view>
				<view class="two_">
					<view class="two_left">
						维修结果及建议：
					</view>
					<view class="two_right">
						{{detail_.ending}}
					</view>
				</view>
				<view class="border_" />

				<view class="sign_ture">
					<view class="sign_ture_user" @tap="jump_qianming('handWriting2')">
						<view class="title" v-if="detail_.image">
							客户签字一
						</view>
						<view class="title2" v-if="!detail_.image">
							客户签字一(点击代签字)
						</view>
						<image :src="detail_.image" style="width: 100%;height: 100%;z-index: 99;" mode="aspectFit"
							v-if="detail_.image" />
						<image :src="imgSrc1" style="width: 100%;height: 100%;z-index: 99;" mode="aspectFit" v-else>
						</image>
					</view>
					<view class="sign_ture_user" @tap="jump_qianming('handWriting3')">
						<view class="title" v-if="detail_.image1">
							客户签字二
						</view>
						<view class="title2" v-if="!detail_.image1">
							客户签字二(点击代签字)
						</view>
						<image :src="detail_.image1" style="width: 100%;height: 100%;z-index: 99;" mode="aspectFit"
							v-if="detail_.image1" />
						<image :src="imgSrc2" style="width: 100%;height: 100%;z-index: 99;" mode="aspectFit" v-else>
						</image>
					</view>
					<view class="sign_ture_engineer">
						<view class="title">
							工程师签字
						</view>
						{{detail_.nickname}}
					</view>
				</view>
				<view class="border_">
				</view>
				<view class="cont_">
					备注：本函仅针对该工单所反馈问题做确认操作，签字后该工单即变更为完结状态，如有其他问题请重新发起报修，谢谢
				</view>
				<view class="btn">
					<view class="getPoster" @tap="reviewPdf(detail_.report_other)">下载PDF</view>
					<view class="submit" @tap="submit"
						:style="{color:detail_.image&&detail_.image1?'#1a66ff!important':'',backgroundColor:detail_.image&&detail_.image1?'#f5f6f8!important':''}">
						{{detail_.image&&detail_.image1?'已提交':'提交'}}
					</view>
				</view>

			</view>
		</block>
		<view class="wrapper" v-else>
			<view class="handBtn">
				<image @click="selectColorEvent('black','#1A1A1A')"
					:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
					:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
				<image @click="selectColorEvent('red','#ca262a')"
					:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
					:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
				<button @click="retDraw" class="delBtn">重写</button>
				<!-- 		<button @click="saveCanvasAsImg" class="saveBtn">保存</button> -->
				<!-- <button @click="previewCanvasImg" class="previewBtn">预览</button> -->
				<button @click="subCanvas" class="subBtn">完成</button>
			</view>
			<view class="handCenter">
				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
					@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
			</view>
			<view class="handRight">
				<view class="handTitle">请签名</view>
			</view>
		</view>

	</view>
</template>

<script>
	import base from '@/request/request.js'
	import cta from "@/components/model/CTA.vue"
	import ctb from "@/components/model/CTB.vue"
	import dra from "@/components/model/DRA.vue"
	import drb from "@/components/model/DRB.vue"
	import cora from "@/components/model/CORA.vue"
	import corb from "@/components/model/CORB.vue"
	import dsa from "@/components/model/DSA.vue"
	import dsb from "@/components/model/DSB.vue"
	import wca from "@/components/model/WCA.vue"
	import wcb from "@/components/model/WCB.vue"
	import smallc from "@/components/model/SMALLC.vue"
	import wave from "@/components/model/WAVE.vue"

	export default {
		components: {
			dra,
			drb,
			cta,
			ctb,
			cora,
			corb,
			dsa,
			dsb,
			wca,
			wcb,
			smallc,
			wave
		},
		data() {
			return {
				beaeUrl: base.beaeUrl,
				canvasName: 'handWriting',
				user_photo: '',
				user_photo2: '',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				canvas_show: true, //画布显示隐藏
				imgSrc: '', //签名数据
				imgSrc1: '',
				imgSrc2: '',
				warranty_id: null, //工单id
				service_id: null, //维修id
				report_id: null, //维修报告id
				detail_: {}, //页面详情
				arrList: [],
				typeData: '',
				service_default: ''
			}
		},
		onShow() {
			console.log(this.beaeUrl, 555);
			this.getdata()
		},
		onLoad(e) {
			this.ctx = uni.createCanvasContext("handWriting");
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#fff');
					})
					.exec();
			});
			this.warranty_id = e.warranty_id
			this.report_id = e.report_id
			this.service_id = e.service_id
			this.getdata()
		},
		methods: {
			jump_qianming(domId) {
				if (domId == 'handWriting2' && this.detail_.image) return;
				if (domId == 'handWriting3' && this.detail_.image1) return;
				this.canvasName = domId;
				if ((domId == 'handWriting2' && this.user_photo) || (domId == 'handWriting3' && this.user_photo2)) {
					this.canvas_show = false;
				} else {
					uni.chooseLocation({
						success: (openRes) => {
							uni.chooseMedia({
								count: 1,
								mediaType: ['image'],
								sourceType: ['camera'],
								camera: 'front',
								success: async (res) => {
									let filePath = res.tempFiles[0].tempFilePath;
									let path = await this.uploadImage(filePath, openRes.address +
										openRes.name);
									if (domId == 'handWriting2') this.user_photo = path;
									if (domId == 'handWriting3') this.user_photo2 = path;
									if (!this.ctx || this.ctx == '') {
										this.ctx = uni.createCanvasContext("handWriting");
										this.$nextTick(() => {
											uni.createSelectorQuery().select('.handCenter')
												.boundingClientRect(rect => {
													this.canvasWidth = rect.width;
													this.canvasHeight = rect.height;
													this.setCanvasBg('#fff');
												})
												.exec();
										});
									}
									this.canvas_show = false;
									// this.canvas_show = true;
								}
							})
						},
						fail: (err) => {
							console.log('err', err);
						}
					});
					setTimeout(() => {
						if (!this.detail_.image) this.canvas_show = !this.canvas_show
					}, 1000)
				}


			},
			// 上传签名
			uploadImage(tempPath, addsy_txt = '') {
				return new Promise((resolve) => {
					if (!tempPath) return resolve('');
					const token = uni.getStorageSync('userInfo').token
					uni.uploadFile({
						url: `${this.beaeUrl}/common/upload`,
						filePath: tempPath,
						name: 'file',
						formData: {
							token: token,
							addsy_txt
						},
						success: (res1) => {
							let imgs = JSON.parse(res1.data).data.fullurl
							resolve(imgs)
						},
						fail: () => {
							uni.showToast({
								title: '上传失败',
								icon: 'error'
							})
						}
					});
				})
			},
			// 笔迹开始
			uploadScaleStart(e) {
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},
			reviewPdf(pdf) {
				if (!pdf || !pdf.url) {
					uni.showToast({
						title: '暂未生成',
						icon: 'error'
					})
					return
				}
				setTimeout(() => {
					uni.showLoading({
						title: '加载中',
						duration: 1500
					});
				}, 100)
				setTimeout(() => {
					uni.getSystemInfo({
						success: res => {
							let that = this
							wx.downloadFile({
								url: pdf.url,
								filePath: '',
								success: res => {
									const filePath = res.filePath ||
										res.tempFilePath
									console.log(filePath)
									wx.openDocument({
										filePath: filePath,
										showMenu: true, // 显示右上角菜单
										fileType: 'pdf',
										success: () => {
											console.log(
												'打开文档成功'
											)
											uni.hideLoading();
										},
										fail: err => {
											console.log(
												`打开文档失败`,
												err)
										}
									})
								},
								fail: err => {
									console.log(`下载文档失败`, err)
								}
							})
						}
					});
				}, 0)
			},
			// 笔迹移动
			uploadScaleMove(e) {
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				//设置canvas背景
				this.setCanvasBg('#fff');
			},
			/**
			 * @param {Object} str
			 * @param {Object} color
			 * 选择颜色
			 */
			selectColorEvent(str, color) {
				this.selectColor = str;
				this.lineColor = color;
			},
			//完成
			subCanvas() {
				this.canvas_show = !this.canvas_show
				const token = uni.getStorageSync('userInfo').token
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success: res => {
						if (this.canvasName == 'handWriting2') {
							this.imgSrc1 = res.tempFilePath
						} else {
							this.imgSrc2 = res.tempFilePath
						}

						/* 	uni.uploadFile({
								url: 'http://ylsb.xibuts.cn/api/common/upload', //仅为示例，非真实的接口地址
								filePath: res.tempFilePath,
								name: 'file',
								formData: {
									token: token // 上传附带参数
								},
								success: (res1) => {
									this.imgSrc=JSON.parse(res1.data).data.fullurl
								},
								fail: res3 => {
									uni.showToast({
										title:'上传失败',
										duration:1500,
										icon:'error'
									})
								}
							}); */

						// console.log(res.tempFilePath, 'canvas生成图片地址');
						/* 	uni.showToast({
								title: '以保存'
							}); */
						//保存到系统相册
						/* uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已成功保存到相册',
									duration: 2000
								});
							}
						}); */
					}
				});
			},
			//保存到相册
			saveCanvasAsImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//预览
			previewCanvasImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						uni.previewImage({
							urls: [res.tempFilePath] //预览图片 数组
						});
					}
				});
			},
			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {

				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			},
			/* 获取结单数据 */
			getdata() {
				this.$https.post('/warranty/seesign', {
					report_id: this.report_id
				}).then(res => {
					//contract_status 合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同
					//service_type 服务类型:0=维修,1=保养,2=安装
					this.detail_ = res.data
					this.arrList = JSON.parse(this.detail_.report_other.column_json)
					this.typeData = this.detail_.pinpai.name
					this.service_default = this.detail_.report_other.type == 0 ? 'A' : (this.detail_.report_other
						.type == 1 ? 'B' : `${this.typeData}` + '保养报告')
					console.log(this.arrList, 'this.arrList')
					this.detail_.contract_status = this.changeContract(this.detail_.contract_status)
					this.detail_.service_type = this.changeService(this.detail_.service_type)
				})
			},
			/* 转化 合同状态  */
			changeContract(i) {
				switch (i) {
					case '0':
						return '无合同';
					case '1':
						return '整机技术保合同';
					case '2':
						return '整机银保合同';
					case '3':
						return '整机金保合同';
					case '4':
						return '整机铂金保合同';
					case '5':
						return '单次保养合同';
					case '6':
						return '单次维修合同';
				}
			},
			/* 转换 服务类型 */
			changeService(i) {
				switch (i) {
					case '0':
						return '维修';
					case '1':
						return '保养';
					case '2':
						return '安装';
				}
			},
			/* 提交 */
			async submit() {
				if (!this.detail_.image || !this.detail_.image1) {
					const img1 = await this.uploadImage(this.imgSrc1);
					const img2 = await this.uploadImage(this.imgSrc2);
					if (!img1) this.user_photo = '';
					if (!img2) this.user_photo2 = '';

					this.$https.post('/warranty/signature', {
						warranty_id: this.detail_.warranty_id, //	工单id
						service_id: this.service_id, //维修id
						report_id: this.report_id, //维修报告id
						image: img1 ? img1 : this.detail_.image,
						image1: img2 ? img2 : this.detail_.image1,
						user_photo: this.user_photo,
						user_photo2: this.user_photo2,
					}).then(res => {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		display: flex;
		align-items: center;
		background-color: #F5F6F8;
		justify-content: space-between;
	}

	.getPoster {
		margin: 15px 0;
		background: #1A66FF;
		color: #fff;
		padding: 5px;
		padding: 0 10px;
		border-radius: 60rpx;
		width: 55%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		box-shadow: 0px 2px 4px 2px rgba(26, 102, 255, 0.3);
	}

	.submit {
		width: 36%;
		height: 78rpx;
		text-align: center;
		background-color: #FFFFFF;
		line-height: 78rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000;
		border-radius: 60rpx;
		box-shadow: 0px 3px 6px 3px rgba(222, 222, 222, 0.3);
	}

	.cont_ {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #969699;
		margin: 32rpx;
	}

	.sign_ture_engineer {
		width: 660rpx;
		height: 183rpx;
		text-align: center;
		background-color: #F5F6F8;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		line-height: 153rpx;
		font-family: "楷体";
		color: #000000;
		position: relative;

		.title {
			position: absolute;
			top: -26%;
			left: 2.2%;
			color: #999999;
			font-size: 26rpx;
			font-weight: 400;
			font-family: Source Han Sans CN-Regular;
		}
	}

	.sign_ture {
		padding: 0 32rpx;
		margin: 30rpx 0;
	}

	.sign_ture_user {
		width: 660rpx;
		height: 183rpx;
		background-color: #F5F6F8;
		margin-bottom: 16rpx;
		position: relative;

		.title {
			position: absolute;
			top: 5%;
			left: 2%;
			color: #999999;
			font-size: 26rpx;
		}

		.title2 {
			position: absolute;
			top: 38%;
			left: 28%;
			color: #999999;
			font-size: 26rpx;
		}
	}

	.sign {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #303030;
		padding: 0 32rpx;
	}

	.sign>view {
		flex: 1;
		text-align: center;
		margin: 30rpx 0;
	}

	.border_ {
		height: 2rpx;
		margin: 0 32rpx;
		background-color: #EBEEF1;
	}

	.head_title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #616161;
		line-height: 40rpx;
		background-color: #f7f8fb;
		text-align: center;
		position: relative;

		.creatBg {
			width: 100%;
			height: 210rpx;
		}
	}

	.repair_main {
		margin: 20rpx;
		position: absolute;
		top: 9%;
		width: 94%;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.repair_title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 12rpx 22rpx;
		font-size: 24rpx;
		margin: 36rpx 0 6rpx;
		width: 200rpx;
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		background-color: #E3E3E3;
		font-family: PingFangSC-Regular, PingFang SC;
	}

	.same_ful {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10rpx 22rpx;
		font-size: 24rpx;
		margin: 6rpx 0 6rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		letter-spacing: 2rpx;

		.ful_left {
			width: 30%;
			font-size: 28rpx;
			font-weight: 500;
			color: #2B2B2B;
			line-height: 33rpx;
		}

		.ful_right {
			width: 66%;
			border-bottom: 2rpx solid #EBEEF1;
			font-size: 28rpx;
			font-weight: 500;
			color: #000;
			padding: 14rpx 20rpx;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.title_ {
		font-size: 28rpx;
		background-image: url('../../static/bg_blue.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: auto;
		width: 190rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #fff;
		padding: 8rpx 30rpx;
		margin: 22rpx 0;
	}

	.content_ {
		padding: 0 32rpx;

		.content_title {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #3B3D3D;
		}

		.content_imgs {
			image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
			}
		}
	}

	.one_ {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		margin: 16rpx 0 16rpx;

		.one_left {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #969699;
		}

		.one_right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	.two_ {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 32rpx;
		margin: 16rpx 0 16rpx;

		.two_left {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #969699;
			margin-bottom: 16rpx;
		}

		.two_right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
		}
	}

	page {
		background: #fbfbfb;
		height: auto;
		overflow: hidden;
	}

	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 30rpx 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 95vh;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handTitle {
		transform: rotate(90deg);
		flex: 1;
		color: #666;
	}

	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}

	/*Peach - 新增 - 保存*/

	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.uploadBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	/*Peach - 新增 - 保存*/

	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	}
</style>